<template>
  <div>
    <span>为什么使用 ref</span>
    {{state.age}}
    age1: {{age1}}
  </div>
</template>

<script>
import {
  ref,
  toRef,
  toRefs,
  reactive,
  computed
} from 'vue'
function useFeatureX() {
  const state = reactive({
    x: 1,
    y: 2
  })
  return toRefs(state)
}
export default {
  name: 'WhyRef',
  setup() {
    const { x, y } = useFeatureX()
    var age = 20

    // Proxy 对象
    const state = reactive({
      age: 20,
      name: 'cheng'
    })

    // computed 返回的是一个类似于 ref 的对象，也有 .value
    const age1 = computed(() => {
      return state.age + 1
    })

    console.log('age1', age1.value)

    setTimeout(() => {
      console.log(1233)
      age = 25
      state.age = 25
    }, 1500)

    return {
      age,
      state,
      age1
    }

  }
}
</script>